<template>
    <div class="page-container">
        <div class="grid-form-container">
            <!-- <div class="operation">
                <el-button type="primary" @click="add">新增</el-button>
                <el-button type="primary" @click="edit">编辑</el-button>
                <el-popconfirm title="确认删除？" confirmButtonText='确定' cancelButtonText='取消' @confirm="del">
                    <template #reference>
                        <el-button>删除</el-button>
                    </template>
                </el-popconfirm>
            </div> -->
            <div class="search">
                <el-input v-model="query.departmentName" class="search-input-class" placeholder="部门名称" />
                <el-input v-model="query.projectCode" class="search-input-class" placeholder="项目编号" />
                <el-input v-model="query.projectName" class="search-input-class" placeholder="项目名称" />
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="grid-container">
            <el-table ref="datagrid" :data="table.data" border @row-click="handleClickTableRow" @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column prop="projectCode" label="项目编码" width="120" show-overflow-tooltip />
                <el-table-column prop="projectName" label="项目名称" width="180" show-overflow-tooltip />
                <el-table-column prop="departmentName" label="所属部门" width="180" show-overflow-tooltip />
                <el-table-column prop="contractAmount" label="合同净额" :formatter="priceFmt" width="100" show-overflow-tooltip />
                <el-table-column prop="subContractAmount" label="分包合同额" :formatter="priceFmt" width="100" show-overflow-tooltip />
                <el-table-column prop="initProgress" label="项目初始进度" width="100" :formatter="progressFmt" show-overflow-tooltip />
                <el-table-column prop="progress" label="更新实际进度" width="100" :formatter="progressFmt" show-overflow-tooltip />
                <el-table-column prop="revenue" label="总营收" width="100" :formatter="priceFmt" show-overflow-tooltip />
                <el-table-column prop="subRevenue" label="总分包营收" width="100" :formatter="priceFmt" show-overflow-tooltip />
                <el-table-column prop="netRevenue" label="总净营收" width="100" :formatter="priceFmt" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="280">
                    <template #default="scope">
                        <el-button v-if="isZlzy" size="small" @click="edit(scope.row, 'view')">查看</el-button>
                        <el-button v-if="isZlzy" size="small" @click="edit(scope.row, 'edit')">维护</el-button>
                        <el-button v-if="isZlzy && scope.row.progressUpdateState == 0" size="small" @click="pushProgressUpdate(scope.row)">进度更新推送</el-button>
                        <el-button v-if="isZlzy && scope.row.yearSplitState == 0" size="small" @click="pushSplitInsert(scope.row)">营收分解推送</el-button>
                        <el-button v-if="isBmfzr && scope.row.progressUpdateState == 1" size="small" @click="edit(scope.row, 'fill')">进度更新待办</el-button>
                        <el-button v-if="isBmfzr && scope.row.yearSplitState == 1" size="small" @click="edit(scope.row, 'fill')">营收分解待办</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="table.pagination.currentPage" :page-sizes="table.pagination.pageSizes" :page-size="table.pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="table.pagination.total">
            </el-pagination>
        </div>
        <transition name="slide-fade">
            <div v-if="showInfoWindow" class="component-container">
                <YsslForm :projectId="projectId" :operation="opetation" @close="closeInfoWindow"></YsslForm>
            </div>
        </transition>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import YsslForm from './form/YsslForm.vue'
import http from '@/http.js'

export default {
    name: 'Revenue',
    components: {
        YsslForm
    },
    setup() {
        const router = useRouter();
        const route = useRoute();
        const datagrid = ref(null);

        const state = reactive({
            currentUser: localStorage.getItem('username'),
            query: {
                departmentName: '',
                projectCode: '',
                projectName: ''
            },
            table: {
                data: [],
                selected: [],
                pagination: {
                    currentPage: 1,
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
            projectId: '',
            showInfoWindow: false,
            isZlzy: false,
            isBmfzr: false,
            opetation: 'view'
        });

        const init = () => {
            let roles = localStorage.getItem("roles");
            if (roles.indexOf('ROLE_ZLZY') > -1 || roles.indexOf('ADMIN') > -1) {
                state.isZlzy = true;
            }
            if (roles.indexOf('ROLE_BMFZR') > -1) {
                state.isBmfzr = true;
            }
        }

        const handleSelectionChange = (val) => {
            state.table.selected = val;
        }

        const handleSizeChange = (val) => {
            state.table.pagination.pageSize = val;
            loadData();
        };

        const handleCurrentChange = (val) => {
            state.table.pagination.currentPage = val;
            loadData();
        };

        const handleClickTableRow = (row) => {
            datagrid.value.clearSelection();
            datagrid.value.toggleRowSelection(row);
        }

        const loadData = () => {
            let params = {
                departmentName: state.query.departmentName,
                projectCode: state.query.projectCode,
                projectName: state.query.projectName,
                roles: localStorage.getItem("roles"),
                departmentId: localStorage.getItem("departmentId"),
                page: state.table.pagination.currentPage,
                pageSize: state.table.pagination.pageSize
            }
            http.fetchForm({
                url: '/jixiao/revenue/queryGird',
                data: params
            }).then((res) => {
                state.table.data = res.data.grid;
                state.table.pagination.total = res.data.total;
            });
        }

        const reset = () => {
            state.query.departmentName = '';
            state.query.projectCode = '';
            state.query.projectName = '';
            loadData();
        }


        const edit = (row, opetation) => {
            state.opetation = opetation;
            state.projectId = row.projectId;
            state.showInfoWindow = true;
        }

        const closeInfoWindow = () => {
            state.showInfoWindow = false;
            loadData();
        }

        const priceFmt = (row, column, cellValue, index) => {
            if (row[column.property] == null) {
                return '';
            } else {
                return row[column.property] / 100;
            }
        }

        const progressFmt = (row, column, cellValue, index) => {
            if (row[column.property] == null) {
                return '';
            } else {
                return row[column.property] + '%';
            }
        }

        const pushProgressUpdate = (row) => {
            console.log(row)
            http.fetchForm({
                    url: "/jixiao/revenue/pushProgressUpdate",
                    method: 'post',
                    data: {
                        id: row.id
                    }
                })
                .then((res) => {
                    ElNotification({
                        title: '提示',
                        message: '进度更新推送成功',
                        type: 'success',
                    });
                    loadData();
                });
        }

        const pushSplitInsert = (row) => {
            http.fetchForm({
                    url: "/jixiao/revenue/pushSplitInsert",
                    method: 'post',
                    data: {
                        id: row.id
                    }
                })
                .then((res) => {
                    ElNotification({
                        title: '提示',
                        message: '营收分解推送成功',
                        type: 'success',
                    });
                    loadData();
                });
        }

        // mounted
        onMounted(() => {
            init();
            loadData();
        });

        return {
            ...toRefs(state),
            datagrid,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            handleClickTableRow,
            loadData,
            reset,
            edit,
            closeInfoWindow,
            priceFmt,
            progressFmt,
            pushProgressUpdate,
            pushSplitInsert
        };
    }
}
</script>
<style scoped>
.page-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.grid-form-container {
    width: 100%;
    padding: 20px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
}

.search {
    display: flex;
}

.search-input-class {
    width: 180px;
    margin-right: 10px;
}

.grid-container {
    padding: 10px 10px 0 10px;
    height: calc(100% - 120px);
}

.pagination-container {
    padding: 10px;
}

.component-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: #fff;
}

.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>